<template>
  <el-drawer
    v-model="localVisible"
    :show-close="false"
    size="80%"
    :destroy-on-close="true"
  >
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">流程详情信息</h4>
      <div v-if="operationFlag">
        <el-button type="success" v-if="hasOperationData && hasOperationData.indexOf('complete') > -1" @click="handleData(1)" :disabled="eventType !== 'complete'">同意</el-button>
        <el-button type="danger" v-if="hasOperationData && hasOperationData.indexOf('forceComplete') > -1" @click="handleData(2)" :disabled="eventType !== 'forceComplete'">拒绝</el-button>

        <el-dropdown @command="handleData" v-if="showDropdown">
          <el-button type="primary">
            更多<el-icon><el-icon-arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('reject') > -1" :command="3" :disabled="eventType !== 'reject'">驳回</el-dropdown-item>
              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('revoke') > -1" :command="4" :disabled="eventType !== 'revoke'">撤销</el-dropdown-item>
              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('transfer') > -1" :command="7" :disabled="eventType !== 'transfer'">转办</el-dropdown-item>
              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('delegate') > -1" :command="8" :disabled="eventType !== 'delegate'">委派</el-dropdown-item>
<!--              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('appendNodeBefore') > -1" :command="5" :disabled="eventType !== 'appendNodeBefore'">前置加签</el-dropdown-item>-->
              <el-dropdown-item v-if="hasOperationData && hasOperationData.indexOf('appendNodeAfter') > -1" :command="6" :disabled="eventType !== 'appendNodeAfter'">加签</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </template>
    <flow-tabs :instance-id="props.instanceId" :business-key="props.businessKey" :instance-state="props.instanceState"
               ref="flowTabsComponent" @update:taskId="getTaskId" @update:eventType="updateEventType"
               :process-type="props.processType"/>
  </el-drawer>
</template>

<script lang="ts" setup name="flowDetailDrawer">
import { ref,provide,watch,onMounted,computed } from "vue";
import flowTabs from "./flowTabs.vue";
import { ElLoading }from"element-plus";

const emits = defineEmits(["update:modelValue","refresh"]);
const flowTabsComponent = ref<InstanceType<typeof flowTabs> | null>(null);
const authTypeList = ref([]);

provide('authTypeList',authTypeList);

const props = defineProps({
  visible: {
    type: Boolean,
    required: false,
    default: () => {
      return false;
    },
  },
  instanceId: {
    type: String,
    required: true,
  },
  businessKey: {
    type: String,
    required: true,
  },
  instanceState: {
    type: Number,
    required: true,
  },
  processType: {
    type: Number,
    required: true,
  },
});
let localVisible = ref(props.visible);
let eventType = ref('complete');
const operationFlag = ref(false);
const hasOperationData = ref([]);
const changeOperationFlag = (opeationInfo) => {
  operationFlag.value = opeationInfo.operationFlag
  hasOperationData.value = opeationInfo.hasOperationData
};

const showDropdown = computed(() => {
  if(hasOperationData.value.length > 0){
    return hasOperationData.value.indexOf('reject') > -1 ||
        hasOperationData.value.indexOf('revoke') > -1 ||
        hasOperationData.value.indexOf('transfer') > -1 ||
        hasOperationData.value.indexOf('delegate') > -1 ;
  }
  return false;
});

// 提供方法
provide('changeOperationFlag', changeOperationFlag);

watch(
  () => props.visible,
  () => {
    localVisible.value = props.visible;
  }
);
watch(
  () => localVisible.value,
  () => {
    emits("update:modelValue", localVisible.value);
  }
);
const state = reactive({
  taskId: undefined
})

const getTaskId = (taskId)=>{
  state.taskId = taskId
}
const updateEventType = (type)=>{
  eventType.value = type
}

//获取组件数据
const getData = ()=>{
  return flowTabsComponent.value?.getData();
}

const loading = ()=> {
  return ElLoading.service({
    text: "正在提交数据，请稍候",
    // spinner: 'el-icon-loading',
    background: "rgba(0, 0, 0, 0.7)",
  })
}

const handleData = (data: number) => {
  const params = {flwInstanceId: undefined,taskId: undefined,dataMap: {},busNo: undefined}
  params.flwInstanceId = props.instanceId
  params.busNo = props.businessKey
  params.taskId = state.taskId
  params.dataMap = getData()
  Object.assign(params,params.dataMap.sys)
  if(data === 7){
    if(!params.transferInfo){
      return
    }
  }
  let loadingInstance = loading()
  switch (data) {
    case 1:
      params.authStatus = '1'
      params.authYesRemarks = params.authRemarks
      //审核通过
      $api.common.send
          .post('flowLong001', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 2:
      params.authStatus = '2'
      params.authNoRemarks = params.authRemarks
      //审核不通过
      $api.common.send
          .post('flowLong001', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 3:
      //驳回
      params.rejectReason = params.authRemarks
      params.rejectTaskId = params.rejectToNode
      $api.common.send
          .post('flowLong020', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 4:
      //撤销
      params.revokeReason = params.authRemarks
      $api.common.send
          .post('flowLong003', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 5:
      //前置加签
      $api.common.send
          .post('flowLong004', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 6:
      //后置加签
      $api.common.send
          .post('flowLong005', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 7:
      //转办
      $api.common.send
          .post('flowLong006', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
    case 8:
      //委派
      $api.common.send
          .post('flowLong007', params)
          .then((res) => {
            emits("refresh");
            loadingInstance.close();
          })
          .catch(() => {
            loadingInstance.close();
          });
      break;
  }
};

function initDict() {
  const params = {
    dictFields: 'AUTHTYPE',
  };
  $api.common.getBatchDict.post(params).then((res) => {
    const list = res.result.AUTHTYPE;
    if(list && list.length > 0){
      for (let listElement of list) {
        const item = {};
        item.value = Number(listElement.dictKey);
        item.label = listElement.dictValue;
        item.eventType = listElement.classify;
        item.title = listElement.remarks;
        authTypeList.value.push(item);
      }
    }
  });
}

onMounted(() => {
  initDict();
});

</script>

<style lang="scss" scoped>
.el-loading-spinner .path {
  stroke: rgb(13, 161, 219);
}
</style>
